<template>
    <p>学生的名字：</p>
    <ul>
        <li v-for="(item,index) in arr" :key="index">{{ item }} --- {{ index }}</li>
    </ul>
    <p>动漫明星榜：</p>
    <li v-for="obj in stuarr" :key="obj.id">
        <span>{{ obj.id }}</span>&nbsp;
        <span>{{ obj.name }}</span>&nbsp;
        <span>{{ obj.age }}</span>&nbsp;
        <span>{{ obj.hobby }}</span>&nbsp;
    </li>
    <p>师傅信息</p>
    <div v-for="(value , key) in Tobj" :key="key">
    {{ key }} -- {{ value }}
    </div>
</template>
<script>
export default {
    data() { 
        return {
            //变量定义都在return中
            /*
            v-for= "别名 in 源数组或对象json"
            v-for= "(别名,索引) in 原数组" :key="索引的名字" 唯一索引
            口诀 让谁循环就在谁的标签上写for
            */
            arr: ['萧炎', '唐三', '叶凡', '王麻子'],
            stuarr: [
                { id: 101, name: '萧炎', age: 18, hobby: '美杜莎' },
                { id: 102, name: '唐三', age: 19, hobby: '小兔子' },
                { id: 103, name: '叶凡', age: 20, hobby: '火灵儿' },
                { id: 104, name: '王麻子', age: 21, hobby: '玩骷髅' }
            ],
            Tobj: {
                name: '药老',
                age: 100,
                class: '炼药师6级'
            }
        }
    }
}

</script>